<template>
  <div class='page-content'>

    <!-- 工具栏区域 -->
    <table-bar :showTop="false"
               :columns="columns"
               @changeColumn="changeColumn">
      <!-- 条件查询区域 -->
      <div slot="top">
        <el-form :model="queryForm"
                 :rules="queryFormRules"
                 ref="queryFormRef"
                 label-width="70px">
          <el-row :gutter="20">
            <!-- 日期查询 -->
            <el-col :xs="24"
                    :sm="12"
                    :lg="7">
              <el-form-item label="时间"
                            prop="date">
                <el-date-picker v-model="date"
                                @change="dateChange"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!-- 类型查询 -->
            <el-col :xs="24"
                    :sm="12"
                    :lg="6">
              <el-form-item label="类型名"
                            prop="doveCategory">
                <el-input v-model="queryForm.doveCategory"
                          clearable
                          placeholder="请输入屠宰完鸽子类型名"></el-input>
              </el-form-item>
            </el-col>
            <!-- 企业id -->
            <!-- <el-col :xs="24"
                    :sm="12"
                    :lg="6">
              <el-form-item label="企业id"
                            prop="id">
                <el-input v-model="query.id"
                          clearable
                          placeholder="请输入所属企业id"></el-input>
              </el-form-item>
            </el-col> -->
            <!-- 搜索重置 -->
            <el-row :xs="24"
                    :sm="12"
                    :lg="6"
                    style="float: right; margin-right: 10px;">
              <el-button type="primary"
                         @click="query">搜索</el-button>
              <el-button @click="resetForm('queryFormRef')">重置</el-button>
            </el-row>
          </el-row>
        </el-form>
      </div>
      <!-- 左侧按钮 -->
      <div slot="bottom">
        <el-button type="primary"
                   plain
                   @click="showAddDialog">新增类型</el-button>
        <el-button type="danger"
                   plain
                   @click="delByIds">批量删除</el-button>
      </div>

    </table-bar>

    <!-- 表格区域 -->
    <the-table :data="typeList"
               @getDataBySelectBox="handleSelectionChange"
               :showPage="false"
               ref="table">
      <el-table-column type="selection"
                       width="55"></el-table-column>

      <el-table-column label="类型编号"
                       prop="guige"
                       v-if="columns[0].show" />
      <el-table-column label="肉鸽类型名"
                       prop="doveCategory"
                       v-if="columns[1].show" />
      <el-table-column label="保质期"
                       prop="expiration"
                       v-if="columns[2].show" />
      <el-table-column label="创建时间"
                       prop="gmtCreate"
                       v-if="columns[3].show" />
      <el-table-column label="修改时间"
                       prop="gmtModified"
                       v-if="columns[4].show" />
      <el-table-column fixed="right"
                       label="操作"
                       width="150px"
                       v-if="columns[4].show">
        <template slot-scope="scope">
          <el-button type="text"
                     icon="el-icon-edit"
                     @click="showeditDialog(scope.row)">
            修改
          </el-button>
          <el-button type="text"
                     style="color: #FA6962"
                     icon="el-icon-delete"
                     @click="delById(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </the-table>

    <!-- 分页器区域 -->
    <el-pagination layout="total, sizes, prev, pager, next, jumper"
                   :page-sizes="[5, 8, 10, 15]"
                   :page-size="pageSize"
                   :current-page="pageNum"
                   :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   class="page">
    </el-pagination>

    <!-- 修改对话框 -->
    <el-dialog title="肉鸽类型名修改"
               :visible.sync="editDialog"
               width="30%">
      <el-form ref="addFormRef"
               :model="editForm"
               :rules="addFormRules"
               label-width="100px">
        <el-form-item label="肉鸽类型名"
                      required>
          <el-select v-model="editForm.doveCategory"
                     filterable
                     placeholder="请选择肉鸽类型">
            <el-option v-for="item in doveCategoryAddList"
                       :key="item"
                       :label="item"
                       :value="item">
            </el-option>
            <template>
              <div class="el-selec-tinner">
                <el-input v-model="addForm.doveCategory"></el-input>
              </div>
            </template>
          </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="保质期"
                      prop="expiration">
          <el-input v-model="editForm.expiration"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="typeChange">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增产品对话框 -->
    <el-dialog title="新增产品"
               :visible.sync="addDialog"
               width="30%">
      <el-form ref="addFormRef"
               :model="addForm"
               :rules="addFormRules"
               label-width="100px">
        <!-- <el-form-item label="所属加工企业"
                      prop="processingId">
          <el-select v-model="addForm.processId"
                     placeholder="请选择所属加工企业">
            <el-option v-for="item in options"
                       :key="item.processId"
                       :label="item.processName"
                       :value="item.processId"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="肉鸽类型名"
                      required>
          <el-select v-model="addForm.doveCategory"
                     filterable
                     placeholder="请选择肉鸽类型">
            <el-option v-for="item in doveCategoryAddList"
                       :key="item"
                       :label="item"
                       :value="item">
            </el-option>
            <template>
              <div class="el-selec-tinner">
                <el-input v-model="addForm.doveCategory"></el-input>
              </div>
            </template>
          </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="保质期"
                      prop="expiration">
          <el-input v-model="addForm.expiration"></el-input>
        </el-form-item>

      </el-form> <span slot="footer"
            class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary"
                   @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { changeColumn, pagination, dialogClose, multipleSelection, queryForm } from '@/api/mixin'
import { dateShorter } from '@/utils/utils'
export default {
  name: "PigeonType",
  meta: {
    title: "肉鸽类型管理",
  },
  mixins: [changeColumn, pagination, dialogClose, queryForm, multipleSelection],
  data () {
    return {
      typeList: [],
      columns: [
        { name: "类型编号", show: true },
        { name: "肉鸽类型名", show: true },
        { name: "保质期", show: true },
        { name: "创建时间", show: true },
        { name: "修改时间", show: true },
        { name: "操作", show: true },
      ],
      options: [],
      //条件查询
      date: [],
      queryForm: {
        begin: '',
        end: '',
        doveCategory: '',
        // id: ''
      },
      // 条件查询表单检验规则
      queryFormRules: {
        date: [],
        doveCategory: [],
        // id: []
      },
      //肉鸽类型名修改
      editDialog: false,
      editId: '',//修改记录暂存id
      editForm: {
        doveCategory: '',//类型名
        expiration: '',
        guige: ''//所属企业 id
      },
      addFormRules: {
        doveCategory: [{ required: true, message: '请输入肉鸽类型名', trigger: 'blur' }, { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }],
        expiration: [{ required: true, message: '请输入保质期', trigger: 'blur' }, { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }]
      },
      addDialog: false,
      addForm: {
        doveCategory: '',//加工产品类型名
        expiration: '',//加工产品保质期
        slaId: '',//加工产品类型名
        guige: 0 //所属企业id  
      },
      doveCategoryAddList: []
    }

  },
  computed: {
    select_shId () {
      return this.$store.state.Usersetting.SlaughterInfo.shId
    }
  },
  methods: {
    async getPigeonTypeList () {
      const { data: res } = await this.$http.get(`/pigeon/t-slaughterhouse-type/pagePigeonList/${this.pageNum}/${this.pageSize}`)
      if (res.statusCode !== 20000) return this.$message.error('获取类型列表失败')
      //保存
      dateShorter(res.data.records, 'gmtCreate')
      dateShorter(res.data.records, 'gmtModified')
      this.typeList = res.data.records
      this.total = res.data.total
      // console.log(res, 'getPigeonTypeList');
    },
    // 监听日期选择器变化
    dateChange (val) {
      // 没有选中val = null
      // console.log('[ val ] >', val)
      if (!val) {
        this.queryForm.begin = ''
        this.queryForm.end = ''
        return this.getList()
      }
      this.queryForm.begin = val[0]
      this.queryForm.end = val[1]

    },
    // 条件查询
    async query () {
      const { data: res } = await this.$http.get(`/pigeon/t-slaughterhouse-type/pageTs/${this.pageNum}/${this.pageSize}`, { params: this.queryForm })
      // console.log(res);
      if (res.statusCode !== 20000) return this.$message.error('查询失败')

      dateShorter(res.data.records, 'gmtCreate')
      dateShorter(res.data.records, 'gmtModified')
      this.typeList = res.data.records
      this.total = res.data.total
    },
    getList () {
      this.getPigeonTypeList()
    },


    /* 修改 */
    showeditDialog ({ doveCategory, guige, id }) {
      this.editForm.doveCategory = doveCategory
      this.editForm.guige = guige
      this.editId = id

      this.editDialog = true

      /*  this.$nextTick(_ => {
         // 让文本框自动获取焦点
         this.$refs.editInputRef.focus()
       }) */

    },

    async typeChange () {
      // 表单校验
      if (this.editForm.doveCategory.length <= 0)
        return this.$message.error('请输入肉鸽类型')

      // 发送请求
      const { data: res } = await this.$http.put(`/pigeon/t-slaughterhouse-type/updateTs/${this.editId}`, this.editForm)
      // console.log(res);
      if (res.statusCode !== 20000) return this.$message.error('修改失败')

      this.getPigeonTypeList()
      this.$message.success('修改成功')
      this.editDialog = false
    },
    /* 修改 */

    /* 删除 */
    delById ({ id }) {
      this.delById_Pigeon('/pigeon/t-slaughterhouse-type/deleteTsById/', id)
    },
    delByIds () {
      this.delByIds_Pigeon('/pigeon/t-slaughterhouse-type/deleteTs/')
    },
    // delByIds_Pigeon方法封装屠宰模块的批量删除，仅屠宰的接口有统一
    /* 删除 */


    /* 新增 */
    showAddDialog () {
      this.addForm.guige = 0 // 获取当前企业
      this.addForm.slaId = this.select_shId


      //获取到工厂列表才可以显示对话框
      this.addDialog = true

    },

    add () {
      this.$refs.addFormRef.validate(async flag => {
        if (!flag)
          return this.$message.error('请正确填写表单')
        const { data: res } = await this.$http.post(`/pigeon/t-slaughterhouse-type/saveTs`, this.addForm)
        if (res.statusCode !== 20000) return this.$message.error('添加失败')

        this.$message.success('添加成功')
        this.getList()
        this.addDialog = false
      })
    },

    /* 新增 */
    async getdoveCategoryAddList () {
      const { data: res } = await this.$http.get('/pigeon/t-slaughterhouse-batch-info/getAllType')
      if (res.statusCode !== 20000) return this.$message.error('获取鸽子类型列表失败')
      this.doveCategoryAddList = res.data
    }

  },
  created () {
    this.getList()
    this.getdoveCategoryAddList()

  }
}
</script>

<style scoped>
.page {
  margin-top: 6px;
  text-align: center;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 100%;
}
</style>